<script setup>
import { ref, onBeforeMount } from 'vue'
import momentTable from './component/momentTable.vue'
import { useRouter } from 'vue-router'
import { momentList } from '@/api'
import { ElMessage } from 'element-plus'
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const activeKey = ref(1)
const handleClick = (tab, event) => {
	getFriendList({
		page: currentPage.value,
		size: pageSize.value
	})
}
const changeCurrentPage = (params) => {
	currentPage.value = params.page
	getFriendList(params)
}
const changePageSize = (params) => {
	pageSize.value = params.size
	getFriendList(params)
}
const getFriendList = async (params) => {
	try {
		const data = await momentList(params)
		if (data.status === 'success') {
			total.value = data.data.count
			tableData.value = data.data.item
		} else {
			ElMessage.error('获取列表失败')
		}
	} catch (error) {
		console.log(error)
	}
}
onBeforeMount(() => {
	getFriendList({
		page: currentPage.value,
		size: pageSize.value
	})
})
const toSetting = () => {
	router.push({
		path: '/app/groupManagement/friendsConfig',
		query: {
			id: 1
		}
	})
}
const postFriend = () => {
	router.push('create')
}
const router = useRouter()
</script>
<template>
	<div class="monent">
		<!-- <div @click="toSetting" class="setting-box">
			<el-icon style="margin-right: 5px; margin-top: 3px"><Setting /></el-icon>
			<span>配置</span>
		</div> -->
		<el-tabs v-model="activeKey" @tab-click="handleClick">
			<el-tab-pane label="企微朋友圈" :name="1">
				<div class="container">
					<div class="container-header">
						<el-button @click="postFriend" style="height: 36px" color="#1890ff" type="primary">发布朋友圈</el-button>
					</div>
					<momentTable
						:activeKey="activeKey"
						:tableData="tableData"
						:total="total"
						:currentPage="currentPage"
						:pageSize="pageSize"
						@getFriendList="getFriendList"
						@changeCurrentPage="changeCurrentPage"
						@changePageSize="changePageSize"
					/>
				</div>
			</el-tab-pane>
			<el-tab-pane label="个人发布记录" :name="2"
				><div class="container">
					<div class="container-header">
						<div class="top-prompt">个人发布记录是企业成员在企微客户朋友圈发布的朋友圈记录</div>
						<div class="emit-moment mb-16"><div>每位客户的朋友圈每天最多可展示3条同一成员发布的朋友圈内容</div></div>
					</div>
					<momentTable
						:activeKey="activeKey"
						:tableData="tableData"
						:total="total"
						:currentPage="currentPage"
						:pageSize="pageSize"
						@getFriendList="getFriendList"
						@changeCurrentPage="changeCurrentPage"
						@changePageSize="changePageSize"
					/></div
			></el-tab-pane>
		</el-tabs>
	</div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs) {
	--el-tabs-header-height: 50px;
}
:deep(.el-tabs__item) {
	font-size: 16px;
}
:deep(.el-tabs__item.is-active) {
	font-weight: 600;
}
:deep(.el-tabs__nav-wrap::after) {
	display: none;
}
:deep(.el-tabs__header) {
	height: 50px;
	line-height: 50px;
	margin-top: 15px;
	margin-left: 8px;
	padding-left: 16px;
	font-size: 16px;
	background-color: #fff;
}
.monent {
	position: relative;
	.setting-box {
		position: absolute;
		right: 15px;
		top: 25px;
		z-index: 20;
		display: flex;
		align-items: center;
		color: #000000a6;
		font-size: 14px;
		cursor: pointer;
	}
	.setting-box:hover {
		color: #1890ff;
	}
}
.container {
	padding: 16px;
	overflow-y: auto;
	-webkit-box-flex: 1;
	flex: 1;
	:deep(.el-dropdown) {
		color: #1890ff;
	}

	.container-header {
		width: 100%;
		margin-bottom: 16px;
		font-size: 13px;
		.top-prompt {
			margin-bottom: 16px;
			padding: 12px 19px;
			background: #eaf2ff;
			border-radius: 2px;
			border: 1px solid #4398ff;
			font-size: 13px;
			font-weight: 400;
			color: #074b9a;
			line-height: 20px;
		}
		.emit-moment {
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
		}
	}
}
</style>
